<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <!-- MVVM中的View -->
    <div id="app">
      <p>{{ msg }}</p>
      <hr />
      <login></login>
      <hr />
      <login></login>
    </div>

    <script>
      // 定义和注册了全局组件
      /**
       * 参数1：组件的名字
       * 参数2：组件的实例
       */
      Vue.component('login', {
        // 组件的视图（内容）
        template: `
            <div>
                用户名：<input v-model="username" type="text" /><br />
                密码：<input v-model="password" type="text" /><br />
                <button @click="login">登录</button>
            </div>
        `,
        // 组件的data必须是一个函数，并且它内部必须要返回函数
        data() {
          return {
            username: '',
            password: ''
          }
        },
        methods: {
          login() {
            console.log(this.username + ' ' + this.password)
          }
        }
      })

      // 实际开发中，new Vue我们称之为根实例，一个项目中有且仅有一个根实例
      new Vue({
        el: '#app', // el，vue解析的范围
        data: {
          msg: 'hello world'
        }
      })
    </script>
  </body>
</html>
